<template>
<div class="searchBar">
	<form action="" >
		<div class="m-input">
			<div class="inputcover">
				<i class="iconfont icon-Magnifier u-srh" @click="submit" ></i>
				<input type="text" name="search" class="minput" :placeholder="ph" v-model="inputvalue"  />
			</div>
		</div>
	</form>
	
	
</div>
</template>

<script>
	export default {
		name:'searchBar',
		props:["ph"],
		data(){
			return {
				inputvalue:''
			}
		},
		methods:{
			submit(){
				this.$emit('searchBar',this.inputvalue)
			}
		},
		watch:{
			inputvalue:function(){
				
				this.$emit('sbInput',this.inputvalue);
			}
			
			
		}
	}
	
	
</script>

<style lang="scss" scoped="scoped">
@import '../scss/common';
@import '../scss/reset';

.m-input{
	padding: r(30px) r(20px);
	position: relative;
	border-bottom: r(2px) solid rgba(0,0,0,0.1);
	.inputcover{
		font-size:0;
		position: relative;
	    width: 100%;
	    height: r(60px);
	    padding: 0 r(60px);
	    box-sizing: border-box;
	    background: #ebecec;
	    border-radius: r(60px);
	    .minput{
			width: 100%;
		    height: r(60px);
		    line-height: r(36px);
		    background: transparent;
		    font-size: r(28px);
		    color: #333;
		    border: none;
		    outline: none;
		}
	}
}
.u-srh{
	position: absolute;
    left: 0;
    top: r(10px);
    margin: 0 r(16px);
    vertical-align: middle;
    color: #ccc;
}



</style>